<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地网页测试</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div>
    <button class="jquery_get">jquery get</button>
    <br/>
    <br/>
    <button class="jquery_post">jquery post</button>
    <br/>
    <br/>
    <button class="axios_get">axios get</button>
    <br/>
    <br/>
    <button class="axios_post">axios post</button>
    <br/>
    <br/>
    <button class="fetch_get"> fetch get</button>
    <br/>
    <br/>
    <button class="fetch_post">fetch post</button>
    <br/>
    <br/>
    <button class="add_localStorage">add localStorage</button>
    <br/>
    <br/>
    <button class="clear_localStorage">clear localStorage </button>
    <br/>
    <br/>
    <button class="add_sessionStorage">add sessionStorage</button>
    <br/>
    <br/>
	<button class="clear_sessionStorage">clear sessionStorage</button>
	<br/>
	<br/>
	<div id="from">请求来源</div>
	<pre id="json">默认文案</pre>
</div>


<script type="text/javascript">
		$(document).ready(function () {
			//初始化localStorage & sessionStorage
			for(var index = 0;index<5;index++){
				window.localStorage.setItem('initLocalStorage' + index, 'dokit' + index);
				window.sessionStorage.setItem('initSessionStorage' + index, 'dokit' + index);
			}


		    //点击事件
			$(".jquery_get").click(function () {
				$.get("https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json", function (data, status) {
					console.log("jquery_get success===>",data);
					$("#from").html("jquery_get success===>");
					$("#json").html(JSON.stringify(data,null,4));
				}).fail(function(err){
					console.log("jquery_get err===>",err);
					$("#from").html("jquery_get err===>");
					$("#json").html(JSON.stringify(err.responseText,null,4));
				});
			});

			$(".jquery_post").click(function () {
				$.post("https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json", {k: "dokit"}, function (data, status) {
					console.log("jquery_post success===>",data);
					$("#from").html("jquery_post success===>");
					$("#json").html(JSON.stringify(data,null,4));
				}).fail(function(err){
					console.log("jquery_post err===>",err);
					$("#from").html("jquery_post err===>");
					$("#json").html(JSON.stringify(err.responseText,null,4));
				});
			});

			$(".axios_get").click(function () {
				axios.get("https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json")
				.then(function(response){
					console.log("axios_get success===>",response.data);
					$("#from").html("axios_get success===>");
					$("#json").html(JSON.stringify(response.data,null,4));
				}).catch((err) => {
					console.log("axios_get err===>",err);
					$("#from").html("axios_get err===>");
					$("#json").html(JSON.stringify(err,null,4));
				});

			});

			$(".axios_post").click(function () {
				axios.post("https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json","k=dokit")
				.then(function(response){
					console.log("axios_post success===>",response.data);
					$("#from").html("axios_post success===>");
					$("#json").html(JSON.stringify(response.data,null,4));
				}).catch((err) => {
					console.log("axios_post err===>",err);
					$("#from").html("axios_post err===>");
					$("#json").html(JSON.stringify(err,null,4));
				});
			});

			$(".fetch_get").click(function () {
				fetch('https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json',{
					headers: {
							'user-agent': 'Mozilla/4.0 MDN Example',
      						'content-type': 'application/json'
    						},
				    method: 'GET',
				})
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(myJson) {
						console.log("fetch_get success===>",myJson);
						$("#from").html("fetch_get success===>");
						$("#json").html(JSON.stringify(myJson,null,4)); 
					})
					.catch(function(err){
						console.log("fetch_get err===>",err);
						$("#from").html("fetch_get err===>");
						$("#json").html(JSON.stringify(err,null,4)); 
					});
			});

			$(".fetch_post").click(function () {
			    fetch('https://jtsky.gitee.io/dokit-mock/static/dokit_h5_mock.json',{
					body: "k=dokit",
					headers: {
							'user-agent': 'Mozilla/4.0 MDN Example',
      						'content-type': 'application/json'
    						},
					method: 'POST'})
                    .then(function(response) {
                      return response.json();
                    })
                    .then(function(myJson) {
						console.log("fetch_post success===>",myJson);
						$("#from").html("fetch_post success===>");
						$("#json").html(JSON.stringify(myJson,null,4)); 
					})
					.catch(function(err){
						console.log("fetch_post err===>",err);
						$("#from").html("fetch_post success===>");
						$("#json").html(JSON.stringify(err,null,4)); 
					});
			});

			$(".add_localStorage").click(function () {
				window.localStorage.setItem('localStorage' + Math.ceil(Math.random()*100), 'dokit' + Math.ceil(Math.random()*100));
			});

            $(".clear_localStorage").click(function () {
				window.localStorage.clear();
			});

			$(".add_sessionStorage").click(function () {
				window.sessionStorage.setItem('sessionStorage' + Math.ceil(Math.random()*100), 'dokit' + Math.ceil(Math.random()*100));
			});

			$(".clear_sessionStorage").click(function () {
				window.sessionStorage.clear();
			});
		});
</script>
</body>

</html>